<template>
  <el-dialog
    width="600px"
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="visible"
    append-to-body
  >
    <el-form class="four" label-width="200px" ref="form" :model="formData" :rules="form_rules">
      <el-form-item label="设备名称" prop="equipmentFullName">
        <el-input
          class="inputLength"
          v-model="formData.equipmentFullName"
          placeholder="输入设备全程"
        ></el-input>
      </el-form-item>
      <el-form-item label="应开动工时" prop="planHour">
        <el-input
          class="inputLength"
          v-model="formData.planHour"
          placeholder="输入应开动工时"
        ></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input class="w200" type="textarea" :row="5" v-model="formData.remark"></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="save()">保存</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import { State, namespace } from 'vuex-class'
import { insertEquipmentList, updateEquipmentList } from '@/api/interface1'
import { Message } from 'element-ui'
import Equipment from './equipment.vue'
import { AxiosPromise, AxiosResponse } from 'axios'

@Component({
  components: {}
})
export default class DialogDetail extends Vue {
  @Prop()
  private formData

  @Prop()
  fetchData

  public $refs!: {
    form: any
  }
  title: string = '设备信息'
  visible: boolean = false

  checkHour = (rule, value, callback) => {
    if (!value) {
      return callback(new Error('不能为空'))
    }
    if (Number.isInteger(Number(value)) && Number(value) >= 0) {
      callback()
    } else {
      callback(new Error('请输入非负整数'))
    }
  }

  form_rules = {
    equipmentFullName: [{ required: true, message: '名称不能为空！', trigger: 'blur' }],
    planHour: [
      { required: true, message: '工时不能为空！', trigger: 'blur' },
      {
        validator: this.checkHour,
        trigger: 'blur'
      }
    ]
  }

  open(isNew = true) {
    this.visible = true
  }

  save() {
    this.$refs['form'].validate(valid => {
      if (valid) {
        this.formData.equipmentShortName = this.formData.equipmentFullName
        if (this.formData.id) {
          updateEquipmentList(this.formData).then(res => {
            if (res.success) {
              Message.success('更新成功')
              this.$emit('fetchData')
              this.close()
            }
          })
        } else {
          insertEquipmentList(this.formData).then(res => {
            if (res.success) {
              Message.success('添加成功')
              this.$emit('fetchData')
              this.close()
            }
          })
        }
      }
    })
  }

  close() {
    this.visible = false
  }
}
</script>

<style lang="scss" scoped>
.four {
  margin-top: 30px;
  .el-form-item {
    margin-bottom: 22px;
  }
}
 .inputLength{
    width:250px

  }
</style>
